<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>css超时空</title>
</head>

<body>
    <div class="scene">
        <div class="wrap a">
            <div class="wall wall-right"></div>
            <div class="wall wall-left"></div>
            <div class="wall wall-top"></div>
            <div class="wall wall-bottom"></div>
            <div class="wall wall-back"></div>
        </div>
        <div class="wrap a">
            <div class="wall wall-right"></div>
            <div class="wall wall-left"></div>
            <div class="wall wall-top"></div>
            <div class="wall wall-bottom"></div>
            <div class="wall wall-back"></div>
        </div>
    </div>
    <script>
        var div = document.querySelectorAll('.wall');

        var arr = ["url(./img/1.jpg)", "url(./img/6.jpg)", "url(./img/3.jpg)", "url(./img/5.jpg)","url(./img/5.jpg)"];
        var k = 0;
        document.addEventListener('touchstart', function () {
            k++;
            if(k==4){
                k=0;
            }
            for (i = 0; i < div.length; i++) {
                div[i].style.backgroundImage = arr[k];
            }
            
        })        
    </script>
</body>

</html>